<template>
  <div style="padding-bottom: 100px">
    <!-- 顶部导航 -->
    <van-sticky>
      <van-nav-bar left-arrow  @click-left="$router.go(-1)">
        <template #right>
          <span>订单详情</span>
          <van-search v-model="value" style="height: 20px" shape="round" placeholder="搜索我的订单" />
        </template>
      </van-nav-bar>
    </van-sticky>
    <van-tabs v-model="active" swipeable>
<!--      <van-divider />-->
      <van-tab title="全部">
        <van-panel style="text-align: left" title="标题" status="状态">
          <van-card
              style="text-align: left"
              num="10"
              price="15.00"
              desc="质量一级棒,拍人神器"
              title="黑米平板电脑"
              thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
          >
            <template #tags>
              <van-tag type="danger">自营</van-tag> &nbsp;
              <van-tag plain type="danger">酷鲨物流</van-tag>
            </template>
            <template #footer>
              <van-button size="small" round color="#7232dd">删除订单</van-button>
              <van-button size="small" round color="linear-gradient(to right, #ff6034, #ee0a24)">再次购买</van-button>
            </template>
          </van-card>
        </van-panel>
      </van-tab>
      <!--   !!!!!!!!!!!!    -->
      <van-tab title="待付款">
        <van-panel style="text-align: left" title="标题" status="状态">
          <van-card
              style="text-align: left"
              num="10"
              price="15.00"
              desc="质量一级棒,拍人神器"
              title="黑米平板电脑"
              thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
          >
            <template #tags>
              <van-tag type="danger">自营</van-tag> &nbsp;
              <van-tag plain type="danger">酷鲨物流</van-tag>
            </template>
            <template #footer>
              <van-button size="small" round color="#7232dd">删除订单</van-button>
              <van-button size="small" round color="linear-gradient(to right, #ff6034, #ee0a24)">再次购买</van-button>
            </template>
          </van-card>
        </van-panel>
      </van-tab>
      <!--   !!!!!!!!!!!!    -->
      <van-tab title="待收货">
        <van-panel style="text-align: left" title="标题" status="状态">
          <van-card
              style="text-align: left"
              num="10"
              price="15.00"
              desc="质量一级棒,拍人神器"
              title="黑米平板电脑"
              thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
          >
            <template #tags>
              <van-tag type="danger">自营</van-tag> &nbsp;
              <van-tag plain type="danger">酷鲨物流</van-tag>
            </template>
            <template #footer>
              <van-button size="small" round color="#7232dd">删除订单</van-button>
              <van-button size="small" round color="linear-gradient(to right, #ff6034, #ee0a24)">再次购买</van-button>
            </template>
          </van-card>
        </van-panel>
      </van-tab>
      <!--   !!!!!!!!!!!!    -->
      <van-tab title="已完成">
          <van-panel style="text-align: left" title="标题" status="状态">
            <van-card
                style="text-align: left"
                num="10"
                price="15.00"
                desc="质量一级棒,拍人神器"
                title="黑米平板电脑"
                thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
            >
              <template #tags>
                <van-tag type="danger">自营</van-tag> &nbsp;
                <van-tag plain type="danger">酷鲨物流</van-tag>
              </template>
              <template #footer>
                <van-button size="small" round color="#7232dd">删除订单</van-button>
                <van-button size="small" round color="linear-gradient(to right, #ff6034, #ee0a24)">再次购买</van-button>
              </template>
            </van-card>
          </van-panel>
      </van-tab>
      <!--   !!!!!!!!!!!!    -->
      <van-tab title="已取消">
        <van-panel style="text-align: left" title="标题" status="状态">
          <van-card
              style="text-align: left"
              num="10"
              price="15.00"
              desc="质量一级棒,拍人神器"
              title="黑米平板电脑"
              thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
          >
            <template #tags>
              <van-tag type="danger">自营</van-tag> &nbsp;
              <van-tag plain type="danger">酷鲨物流</van-tag>
            </template>
            <template #footer>
              <van-button size="small" round color="#7232dd">删除订单</van-button>
              <van-button size="small" round color="linear-gradient(to right, #ff6034, #ee0a24)">再次购买</van-button>
            </template>
          </van-card>
        </van-panel>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      active: 1,

    };
  },
  methods: {

  },
};
</script>
<style scoped>
/** 自定义分割线 */

</style>
